.relative {
    position: relative;
}

.river-lv-button {
    position: absolute;
    bottom: 30px * @ratio;
    right: 20px * @ratio;
    cursor: pointer;
    color: rgba(1, 217, 226, 1);
}

#map-river {
    z-index: 999;
    overflow: hidden;

    .charts {
        height: 220px * @ratio;
    }
}

.dialog.map-waterLv {
    z-index: 999;
    overflow: hidden;
}

.flex-wrap {
    display: flex;
}

.align-items-center {
    align-items: center;
}

.align-center {
    align-items: center;
    justify-content: center;
}

.mg-r-30 {
    margin-right: 30px * @ratio;
}

.chart-descr {
    margin-top: -20px *@ratio;

    .dot {
        display: inline-block;
        font-style: normal;
        background: #fff;
        width: 10px * @ratio;
        height: 10px * @ratio;
        margin-right: 10px * @ratio;
        border-radius: 50%;
    }
}

#index .map-river .detail .chart-descr p {
    border-bottom: none;
}

.flex-end {
    justify-content: flex-end;
}

.space-between {
    justify-content: space-between;
}

#river-lv-history {
    width: 96%;
    height: 440px * @ratio;
    overflow-y: auto;
    margin-left: auto;
    margin-right: auto;

    &::-webkit-scrollbar {
        display: none;
    }

    .el-pagination button, .el-pagination span:not([class*=suffix]) {
        color: #fff;
        font-size: 16px * @ratio;
        font-weight: normal;
    }

    .el-pagination .btn-next, .el-pagination .btn-prev {
        background: transparent;
    }

    .page {
        margin-top: 5px * @ratio;
    }

    .page-cursor {
        cursor: pointer;
    }

    .river-table {
        margin: 10px * @ratio auto;
    }

    .cell {
        font-size: 12px * @ratio;
        padding: 10px * @ratio;
        color: rgba(1, 217, 226, 1);
    }

    .el-table--enable-row-hover .el-table__body tr:hover > td {
        background: transparent;
    }

    .el-table__row .cell {
        color: #fff;
    }

    .el-table th, .el-table tr, .el-table__empty-block {
        background: rgba(12, 54, 105, 1);
    }

    .el-table__empty-text {
        color: #fff;
    }

    .el-table thead, .el-table {
        border: 1px * @ratio solid rgba(1, 217, 226, 1);
    }

    .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 30%;
        cursor: pointer;
    }
}

.rive-lv-history-title {
    font-size: 16px * @ratio;
}

.back-to-river-lv {
    color: rgba(1, 217, 226, 1);
    font-size: 16px * @ratio;
}

.back-to-riverlv {
    margin-left: 10px * @ratio;
    cursor: pointer;
    color: rgba(1, 217, 226, 1);
}

.history-date {
    width: 90%;
    flex: 1;
    margin: 10px * @ratio auto;
    padding: 10px * @ratio;
}

#river-lv-history {
    .charts {
        width: 500px * @ratio;
        margin-left: auto;
        margin-right: auto;
    }
}

.el-picker-panel.el-date-picker.el-popper.river-history-date {
    width: 322px * @ratio;
    line-height: 30px * @ratio;

    .el-picker-panel__content {
        width: 292px * @ratio;
    }

    .el-picker-panel__icon-btn, .el-date-picker__header-label, .el-date-table {
        font-size: 16px * @ratio;
    }

    .el-date-table td {
        padding: 8px * @ratio 0;

        span {
            width: 24px * @ratio;
            height: 24px * @ratio;
            line-height: 24px * @ratio;
        }
    }
}

.line-fone-size {
    font-size: 12px * @ratio;
}

#map-reservoir {
    width: 700px * @ratio;
    height: 360px * @ratio;
    overflow: hidden;

    .reservoir-wrap {
        width: 90%;
        height: 320px * @ratio;
        margin-left: auto;
        margin-right: auto;
    }

    .el-col {
        height: 100%;
    }

    .left-col {
        overflow-y: auto;
        &::-webkit-scrollbar {
            display: none;
        }
        p {
            height: 38px * @ratio;
            line-height: 38px * @ratio;
            font-size: 12px * @ratio;
            border-bottom: 1px * @ratio #eee dotted;
        }

        span:first-child {
            color: rgba(255, 255, 255, .8);
        }

        span:nth-child(2), span:last-child {
            color: #fff;
            line-height: 1.5
        }
    }

    .el-icon-phone {
        color: #fff;
        margin-left: 20px * @ratio;
    }

    .charts {
        width: 100%;
        height:100%;
    }
}
